﻿<div class="layui-card" id="lg-TuitionItemList">
    <div class="layui-card-header">
        <i class="fa fa-home fa-fw"></i>缴费项目
        <div class="tool layui-inline" style="float: right">
            <button type="button" class="layui-btn layui-btn-sm" v-on:click="Back" title="返回"><i class="fa fa-reply fa-fw fa-xs" aria-hidden="true"></i>返回</button>
        </div>
    </div>
    <div class="layui-card-body" id="">
        <!--查询条件-->
        <div class="lg-search" skin="lg-form-inline">
            <div class="lg-search-item" style="width:100px">
                <lg-form-singletext :data="{Title:'名称'}" v-model:value="where.Title"></lg-form-singletext>
            </div>
            <div class="lg-search-item layui-input-inline" style="width:auto">
                <button class="layui-btn" type="button" v-on:click="onSearch">搜索</button>
            </div>
        </div>
        <!--数据主体-->
        <div class="lg-form-box">
            <!--头部工具条-->
            <div class="lg-table-tool" id="toolbar">
                <div class="layui-btn-container">
                    <button class="layui-btn layui-btn-sm layui-btn-normal" v-on:click="OnAddItemEvent"><i class="fa fa-plus fa-fw"></i>添加项</button>
                    <button class="layui-btn layui-btn-sm layui-btn-primary refresh" v-on:click="refresh"><i class="fa fa-refresh fa-fw"></i>刷新</button>
                </div>
            </div>
            <!--table-->
            <div class="lg-table-body">
                <table class="lg-table">
                    <thead>
                        <tr>
                            <th class="lg-table-check" v-on:click='onRowCheckAll'>
                                <div :class="['layui-unselect layui-form-checkbox',{'layui-form-checked':items&&items.length>0&&checked.length==items.length}]" lay-skin="primary"><i class="layui-icon layui-icon-ok"></i></div>
                            </th>
                            <th style="text-align:center;width:250px">名称</th>
                            <th style="text-align:center">描述</th>
                            <th style="text-align:center;width:120px">单价</th>
                            <th style="text-align:center;width:80px">状态</th>
                            <th style="width:160px">操作</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr v-for="row in items">
                            <td class="lg-table-check">
                                <div :class="['layui-unselect layui-form-checkbox',{'layui-form-checked':isChecked(row)}]" lay-skin="primary" v-on:click="onRowCheck(row)"><i class="layui-icon layui-icon-ok"></i></div>
                            </td>
                            <td>{{row.Title}}</td>
                            <td>{{row.Tips}}</td>
                            <td>{{row.Price}}</td>
                            <td>
                                <div :class="['layui-unselect layui-form-switch',{'layui-form-onswitch':row.IsUsing==1}]" v-on:click="IsUsingEvent(row)">
                                    <em>{{row.IsUsing==1?"ON":"OFF"}}</em><i></i>
                                </div>
                            </td>
                            <td>
                                <a class="layui-btn layui-btn-xs layui-btn-normal" title="编辑" v-on:click="EditEvent(row)"><span class="fa fa-pencil-square-o fa-fw "></span></a>
                                <a class="layui-btn layui-btn-xs layui-btn-warm" title="删除" v-on:click="DeleteEvent(row)"><span class="fa fa-trash-o fa-fw"></span></a>
                            </td>
                        </tr>
                    </tbody>
                </table>
                <div class="LgTable-NoData" v-if="items.length==0||loading">
                    <p v-if="!loading">没有数据 ~</p>
                    <p v-if="loading"><img src="/Plugins/layer/theme/default/loading-2.gif" style="width:20px" /> 数据加载中...</p>
                </div>
            </div>
            <!--分页-->
            <div id="pager-TuitionItem" style="margin-top:-10px;"></div>
        </div>
    </div>
    <!--弹层-->
   <div id="ItemAEWrap" style="display:none">
        <lg-form :data="ae.form" v-on:submit="FormSubmitEvent" bt-text="确认"></lg-form>
    </div>
</div>
<script class="tempScript">
    frame.createPage({
        mounted: function() {
            var page = this;
            var app = Vue.createApp({
                data() {
                    return {
                        items: [],
                        where: {
                            Page: 1,
                            Limit: 10,
                            Title: "",
                        },
                        ae: {},
                        checked: [],
                        loading: false
                    }
                },
                mounted: function() {
                    this.AEInit();
                    this.GetItems();
                },
                methods: {
                    GetItems: function() {
                        this.loading = true;
                        this.items = [];
                        lg.request({
                            url: "/api/sys/apply/GetTuitionItemList",
                            data: this.where,
                            success: res => {
                                if (res.code == 0) {
                                    if (res.data != null) {
                                        this.items = res.data;
                                        this.setPage(res.count);
                                    }

                                } else {
                                    layer.msg(res.msg, { icon: 2 });
                                }
                            },
                            complete: res => {
                                this.loading = false;
                            }
                        })
                    },
                    OnAddItemEvent: function() {
                         layer.open({
                            type: 1,
                            area:['400px','500px'],
                            content: $("#ItemAEWrap")
                        })
                    },
                    FormSubmitEvent: function() {
                        var obj = {};
                        var _url = "/api/sys/apply/AddTuitionItem";
                        //表单较验
                        for (let i in this.ae.form) {
                            item = this.ae.form[i];
                            var res = diyForm.verify(item.TypeName, item.Data)
                            if (!res.state) {
                                item.Data.error = true;
                                item.Data.errMsg = res.msg;
                                layer.msg(res.msg, { icon: 2 });
                                return false;
                            } else {
                                obj[item.Data.Name]=item.Data.Value
                                item.Data.error = false;
                                item.Data.errMsg = "验证通过！";
                            }
                        }
                        //判断是不是编辑，是则将Id带入参数
                        if (this.ae.id > 1) {
                            obj.Id = this.ae.id;
                            _url = "/api/sys/apply/EditTuitionItem";
                        }
                        //执行数据提交
                        lg.request({
                                url:_url,
                                method: "post",
                                data: obj,
                                success: res => {
                                    layer.closeAll();
                                    if (res.code == 0) {
                                        layer.msg("执行成功！", { icon: 1 });
                                        this.GetItems();
                                    } else {
                                        layer.msg(res.msg, { icon: 2 });
                                    }
                                }
                            })
                        //ae数据初始化
                        this.AEInit();
                    },
                    AEInit: function() {
                        this.ae={
                            id:0,
                            form:[
                                {TypeName:"SingleText",Data:{Title: '项目名称', Name: 'Title',IsRender:true,Required:true}} 
                               ,{TypeName:"Number",Data:{Title: '项目单价', Name: 'Price', IsRender:true,Required:true}} 
                               ,{TypeName:"Textarea",Data:{Title: '项目备注', Name: 'Tips', IsRender:true}} 
                            ]
                        }
                    },
                    onSearch: function() {
                        this.where.Page = "1";
                        this.GetItems();
                    },
                    refresh: function() {
                        this.GetItems();
                    },
                    setPage: function(count) {
                        var that = this;
                        layui.laypage.render({
                            elem: 'pager-TuitionItem'
                            , curr: that.where.Page
                            , limit: that.where.Limit
                            , count: count
                            , layout: ['count', 'prev', 'page', 'next', 'limit', 'refresh', 'skip']
                            , jump: function(obj, first) {
                                if (!first) {
                                    that.where.Page = obj.curr;
                                    that.where.Limit = obj.limit;
                                    that.GetItems();
                                }
                            }
                        });
                    },
                    info: function(item) {
                        frame.NavigateTo({
                            url: "/lgm/apply/apply/info/" + item.Id,
                            title: "学生详情[" + item.Name + "]"
                        });
                    },
                    remove: function(item) {
                        var that = this;
                        layer.confirm("删除不可恢复，是否确定继续执行？", function(box) {
                            layer.close(box);
                            lg.request({
                                url: "/api/sys/apply/deleteapply",
                                method: "post",
                                data: { id: item.Id },
                                success: res => {
                                    if (res.code == 0) {
                                        that.refresh();
                                    } else {
                                        layer.msg(res.msg, { icon: 2 })
                                    }
                                }
                            })
                        })

                    },
                    isChecked: function(item) {
                        return this.checked.filter(p => p.Id == item.Id).length == 1;
                    },
                    onRowCheck: function(item) {
                        if (this.isChecked(item)) {
                            this.checked = this.checked.filter(p => p.Id != item.Id);
                        } else {
                            this.checked.push(item);
                        }
                    },
                    onRowCheckAll: function() {
                        var b = this.checked.length == this.items.length;
                        if (b) {
                            this.checked = []
                        } else {
                            var arry = [];
                            for (let i in this.items) {
                                arry.push(this.items[i]);
                            }
                            this.checked = arry;
                        }

                    },
                    onCheckAll: function(attr) {
                        var b = false;
                        var checkCount = this.colmaps.filter(p => p[attr]).length;
                        var count = this.colmaps.length;
                        if (checkCount == count) {
                            b = true;
                        }
                        for (let i in this.colmaps) {
                            this.colmaps[i][attr] = !b;
                        }
                    },
                    IsUsingEvent: function(item) {
                        var _data = {
                            Id:item.Id,
                            IsUsing:item.IsUsing==1?0:1
                        }
                        lg.request({
                            url:"/api/sys/apply/EditTuitionItem",
                            method:"post",
                            data:_data,
                            success: res => {
                                if (res.code == 0) {
                                    item.IsUsing = _data.IsUsing
                                } else {
                                    layer.msg(res.msg, {icon:2})
                                }
                            }
                        })
                    },
                    EditEvent:function(item){
                        var that = this;
                        this.ae.id = item.Id;
                        this.ae.form[0].Data.Value = item.Title;
                        this.ae.form[1].Data.Value = item.Price;
                        this.ae.form[2].Data.Value = item.Tips;
                        layer.open({
                            type: 1,
                            area: ['400px', '500px'],
                            content: $("#ItemAEWrap"),
                            cancel: that.AEInit
                        })
                    },
                    DeleteEvent: function(item) {
                        var that = this;
                        layer.confirm("删除不可恢复，是否确认执行？", function(box) {
                            layer.close(box);
                            lg.request({
                                url:"/api/sys/apply/DeleteTuitionItem",
                                method: "post",
                                data: {id:item.Id},
                                success: res => {
                                    if (res.code == 0) {
                                        layer.msg("执行成功！", { icon: 1 });
                                        that.GetItems();
                                    } else {
                                        layer.msg(res.msg, {icon:2})
                                    }
                                }
                            })
                        })
                    },
                    Back: function() {
                       frame.Back(page.url, res => { });
                    },
                }
            })
            diyForm.componentForms(app);
            this.vm = app.mount("#lg-TuitionItemList");
        },
        methods: {
            reload: function() {
                this.vm.refresh();
            },
        }
    }).mount();
</script>